<template>
    <div>
        <el-form
            ref="loginForm"
            :rules="rules"
            :model="loginForm"
            v-loading="loading"
            element-loading-text="正在登录..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            class="loginContainer"
        >
            <h3 class="loginTitle">系统登录</h3>
            <el-form-item prop="username">
                <el-input
                    type="text"
                    v-model="loginForm.username"
                    placeholder="请输入用户名"
                ></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                    type="password"
                    v-model="loginForm.password"
                    placeholder="请输入密码"
                ></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input
                    style="width: 250px; margin-right: 5px"
                    type="text"
                    v-model="loginForm.code"
                    placeholder="点击图片更换验证码"
                ></el-input>
                <img :src="captchaUrl" @click="updateCaptcha" />
            </el-form-item>
            <!-- <el-checkbox v-model="checked" class="loginRemember"
                >记住我</el-checkbox
            > -->
            <el-button type="primary" style="width: 100%" @click="submitLogin"
                >登录</el-button
            >
        </el-form>
    </div>
</template>

<script>
export default {
    name: "login",
    data() {
        return {
            // 登录表单
            loginForm: {
                username: "admin",
                password: 123,
                code: "",
            },
            // 验证码图片路径
            captchaUrl: "/captcha?time=" + new Date(),
            // 记住我复选框
            checked: false,
            // 登录表单校验规则
            rules: {
                username: [
                    {
                        required: true,
                        message: "用户名不能为空",
                        trigger: "blur",
                    },
                    {
                        min: 3,
                        max: 15,
                        message: "长度在 3 到 15 个字符",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur",
                    },
                    // {
                    //     min: 3,
                    //     max: 5,
                    //     message: "长度在 3 到 16 个字符",
                    //     trigger: "blur",
                    // },
                ],
                code: [
                    {
                        required: true,
                        message: "验证码不能为空",
                        trigger: "blur",
                    },
                ],
            },
            // 加载
            loading: false,
        };
    },
    methods: {
        // 登录系统
        submitLogin() {
            // 校验表单
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    // 调用登录     /login  接口
                    this.postRequest("/login", this.loginForm).then((res) => {
                        if (res) {
                            this.loading = false;
                            const token = res.obj.tokenHead + res.obj.token;
                            window.sessionStorage.setItem("token", token);
                            // 页面跳转
                            let path = this.$route.query.redirect;
                            this.$router.replace(
                                path == "/" || path == undefined
                                    ? "/home"
                                    : path
                            );
                        }
                        // this.$message.success("登录成功");
                    });
                } else {
                    // 登录失败之后更新验证码
                    this.updateCaptcha();
                    this.loading = false;
                    this.$message.error("请填写完整登录表单");
                    return;
                }
            });
        },
        // 更新验证码
        updateCaptcha() {
            this.captchaUrl = "/captcha?time=" + new Date();
        },
    },
};
</script>

<style>
.loginContainer {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
.loginTitle {
    margin: 0 auto 40px auto;
    text-align: center;
}
.loginRemember {
    text-align: left;
    margin: 0 0 15px 0;
}
.el-form-item__content {
    display: flex;
    align-items: center;
}
</style>
